<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            font-size: 20px;
        }
        /* 

            伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）
                伪元素使用 :: 开头

                ::first-letter 表示第一个字母
                ::first-line 表示第一行
                ::selection 表示选中的内容
                ::before  表示元素的开始
                ::after  表示元素的最后
                    -before和after  必须结合content属性来使用
         */
         p::first-letter{
             font-size: 50px;
         }

         p::first-line{
             background-color: yellowgreen;
         }
         
         p::selection{
             background-color: greenyellow;
         }

         /* div::before{
             content: 'abc';
             color: red;
         }

         div::after{
             content: 'aha';
         } */

         div::before{
             content: '『';
         }
         div::after{
             content: '』';
         }
    </style>
</head>
<body>

    <!-- <q>hello</q> -->
    <div>hello  jiao  lin  jie</div>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et sed officia quae animi eum est voluptas natus esse quibusdam, beatae corrupti, vero dignissimos. Suscipit dolore quasi eum? Veniam, sunt perferendis. 
    </p>
    
</body>
</html>